<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>盒子模型</title>
</head>
<body>
    <!-- 
       盒子模型 分为 外边距(margin) 边框(border) 内边距(padding) 内容(contetn)
       其中 height: 为 内容的高度，width 为内容的宽度。
       border 和 padding 都会影响到盒子模型的可见大小
       盒子模型 的width = border-left-width + padding-left-width + width + padding-right-width + border-right-width

     -->

     <!--
       1. 盒子模型 margin border padding 值的设定
            - 一个值 : 四个方向 都是
            - 两个值 : (上下) (左右)
            - 三个值 : 上 (左右) 下
            - 四个值 : 上 右 下 左
        
        2. margin :auto 一般用于水平放置元素 ，垂直无效
            - 当设定 margin-right = auto ,则左外边距最大，反之 margin-left 也一样
            - 当设定 margin-left = auto; margin-right = auto ;
              元素水平居中       
     -->
     <!--
        异常点:
            1> 垂直外边距的重叠.当网页中， 垂直方向 的 相邻 外边距 会发生外边距的重叠。
              所谓的外边距重叠 指 “兄弟元素之间的相邻外边距取最大值，而不是 取和”

              - 解决方法: 使两兄弟节点不相邻。

            2> 如果父子元素的垂直外边距相邻了，则子元素的外边距 会设置给父元素的样式，俗称“坍塌”

              - 解决方法，使用 border 或者 padding 使父子元素之间有间隔

     -->

     <!--
       内联样式的盒模型
       1> 内联样式不能设置 width 和 height
       2> 可以设置 水平内边距，会影响布局
       3> 可以设置 垂直内边距，不会影响布局
       4> 可以设置 水平边框，会影响布局
       5> 可以设置 垂直边框，不会影响布局
       6> 可以设置 水平外边距，距离为求和，但不能设置垂直外边距

     -->
</body>
</html>